<template>
  <div
    id="myChart"
    :style="{width: '100%', height: '600px'}"
  />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    sheepNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      option: {
        visualMap: [{
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }],
        title: [{
          left: 'center',
          text: ''
        }],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          data: []
        }],
        yAxis: [{
          minInterval: 1
        }],
        grid: [{}],
        series: [{
          type: 'line',
          // showSymbol: true,
          data: [],
          lineStyle: {
            normal: {
              color: '#1aa97b'
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#1aa97b',
              color: 'red'
            },
            emphasis: {
              color: '#1aa97b'
            }
          }
        }]
      }
    }
  },
  computed: {
    title() {
      return `${this.sheepNumber}饮水折线图`
    }
  },
  watch: {
    data(newValue) {
      const tempValue = newValue.map(item => [item.name, item.value])
      this.initWater(tempValue)
    }
  },
  methods: {
    initWater(data) {
      var dateList = data.map(function(item) {
        return item[0]
      })
      var valueList = data.map(function(item) {
        return item[1]
      })
      this.option.xAxis[0].data = dateList
      this.option.series[0].data = valueList
      this.option.title[0].text = this.title
      this.option.tooltip = {
        trigger: 'axis',
        formatter: function(params) {
          const { name, data } = params[0]
          var htmlStr = ''
          htmlStr += '<div>'
          htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #1aa97b;"></span>'
          htmlStr += `${name}共饮水${data}次`
          htmlStr += '</div>'
          return htmlStr
        }
      }
      const myChart = echarts.init(document.getElementById('myChart'))
      myChart.on('click', ({ name }) => {
        this.$emit('updateDate', name)
        /*
        if(param.data.name == '') {
            that.barArr = [10,60,40];
            that.barColor = '#CA8622';
            that.nowdaybar();
        } else if(param.data.name == '') {
            that.barArr = [30,40,60];
            that.barColor = '#0C92EF';
            that.nowdaybar();
        } else if(param.data.name == '') {
            that.barArr = [50,20,60];
            that.barColor = '#C23531';
            that.nowdaybar();
        }
        */
      })
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
